<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/product/shop_car.css">
    <title>结算</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <p class="shop_car_tit fl">结算</p>
            <!-- <div class="search_box fr">
                <input type="text" name="" id="" class="search_input" placeholder="电子天平">
                <div class="search_btn">
                    <img src="../images/search-2.png" alt="">
                </div>
                <div class="history_search">
                    <ul>
                        <li>电子天平1</li>
                        <li>电子天平2</li>
                        <li>电子天平3</li>
                        <li>电子天平4</li>
                        <li>电子天平5</li>
                        <li>电子天平6</li>
                    </ul>
                </div>
            </div> -->
        </div>

        <div class="wrap get_address">
            <div class="get_tit_box">
                <span class="fl get_tit">收货地址</span>
                <!-- <span class="fr new_address cursor" @click='new_add'>新增收货地址</span> -->
            </div>
            <div class="addtess_item cursor" :class='{active:active_index===index}' v-for='(item,index) in addressList'
                @click='choose_add(index,item.id)'>
                <span class="name">{{item.consigneeRealname}}</span>
                <span class="address">{{item.provinceName}} {{item.districtName}} {{item.cityName}}
                    {{item.consigneeAddressAlias}}</span>
                <span class="num">{{item.consigneePhone}}</span>
            </div>
        </div>

        <div class="check_order wrap">
            <p class="check_tits">核对订单</p>
            <div>
                <div class="check_tit">
                    <ul>
                        <li class="check_four">商品</li>
                        <li class="check_two">规格</li>
                        <li class="check_two">单价</li>
                        <li class="check_two">数量</li>
                        <li class="check_two text_right padding_left">小计</li>
                    </ul>
                </div>
                <div class="check_shop">{{resultData.mercName}}</div>
                <div class="shop_item">
                    <div class="shop_detail padding_lr">
                        <div class="check_four fl">
                            <div class="detail_img fl">
                                <img :src="resultData.goodsImg" alt="">
                            </div>
                            <p class="detail_name">{{resultData.goodsName}}</p>
                        </div>
                        <div class="check_two fl">
                            {{resultData.goodsSku}}
                        </div>
                        <div class="check_two fl">
                            <p>￥{{resultData.msPrice}}</p>
                        </div>
                        <div class="check_two fl">
                            {{quantity}}&nbsp;
                        </div>
                        <div class="check_two text_right fl">
                            <p class="product_money">￥{{resultData.msPrice}}</p>
                            <!-- <p class="send_money">邮费：￥{{resultData.dispatchPrice}}</p> -->
                        </div>
                    </div>
                    <div class="remark_box">
                        <span class="fl">备注：</span>
                        <input type="text" class="fl remark" v-model='remark' name="" id="">
                    </div>
                </div>
            </div>

        </div>

        <!-- <div class="discount_box wrap">
            <div class="discount_tit">
                优惠券
            </div>
            <div class="discount_ticket">
                <div v-for='item in couponsUserList'>
                    <div class="dicket_item fl" @click='choose_coupons(index,indexs)'>
                        <div class="dicket_img">
                            <div class="disket_money">
                                <span class="disket_icon fl">¥</span>
                                <span class="disket_num fl">{{item.coupons.couponMoney}}</span>
                                <span class="can_use fl">满{{item.coupons.spendMoney}}可用</span>
                            </div>
                            <p class="ticket_data">{{item.coupons.sendStartTime =
                                item.coupons.sendStartTime.substring(0, 10)}}－{{item.coupons.sendEndTime =
                                item.coupons.sendEndTime.substring(0, 10)}}</p>
                        </div>
                        <div class="dicket_shop">
                            {{item.coupons.couponName}}
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <div class="order_detail wrap">
            <div class="order_info_item">
                <div class="order_into_ans fr">
                    ￥{{resultData.msPrice}}
                </div>
                <div class="order_into_tit fr">
                    共<span> {{quantity}}</span>件商品,商品总额：
                </div>
            </div>
            <!-- <div class="order_info_item">
                <div class="order_into_ans fr">
                    -￥{{totalNum}}
                </div>
                <div class="order_into_tit fr">
                    优惠：
                </div>
            </div>
            <div class="order_info_item">
                <div class="order_into_ans fr">
                    ￥{{resultData.dispatchPrice}}
                </div>
                <div class="order_into_tit fr">
                    运费：
                </div>
            </div> -->
            <div class="order_info_item">
                <div class="pay_all_money fr">
                    ￥{{resultData.msPrice}}
                </div>
                <div class="order_into_tit fr">
                    应付总额：
                </div>
            </div>
            <!-- <div class="add_person">寄送至：{{addressList[active_index].provinceName}} {{addressList[active_index].districtName}} {{addressList[active_index].cityName}} {{addressList[active_index].consigneeRealname}}</div> -->
            <!-- <div class="add_person">收货人：{{addressList[active_index].consigneeRealname}}    {{addressList[active_index].consigneePhone}}</div> -->
        </div>
        <div class="wrap clear_both">
            <div class="shop_submit_btn cursor fr" @click='submit_order()'>
                提交订单
            </div>
        </div>


        <!-- <div class="add_popup" v-show='add_popup'>
            <div class="add_popup_tit">
                <span class="fl">新增收货地址</span>
                <div class="fr close_x" @click='close_x'>
                    <img src="../images/close_x.png" alt="">
                </div>
            </div>
           
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 所在地区
                </div>
                <div class="add_write_input fl">
                    <select class="check_address">
                        <option value="volvo">天津</option>
                    </select>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 收货人
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input10"
                        clearable>
                    </el-input>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 详细地址
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input11"
                        clearable>
                    </el-input>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 手机号码
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input12"
                        clearable>
                    </el-input>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 固定号码
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input11"
                        clearable>
                    </el-input>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span></span> 邮箱地址
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input11"
                        clearable>
                    </el-input>
                    <p>用来接收订单提醒邮件，便于您及时了解订单状态</p>
                </div>
            </div>
            <div class="write_item">
                <div class="add_write_tit fl">
                    <span>*</span> 地址别名
                </div>
                <div class="add_write_input fl">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input11"
                        clearable class="fl">
                    </el-input>
                </div>
                <div class="commonly_address fr">
                    建议填写常用名称 
                    <span class="add_box">家里</span>
                    <span class="add_box">父母家</span>
                    <span class="add_box">公司</span>
                </div>
            </div>

            <div class="address_popup_btn">
                保存收货地址
            </div>
        </div> -->
        <div id="form_sumbit" style="display: none"></div>


        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>
    </div>


    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    shop:2,
                    add_popup:false,
                    input10:'',
                    input11:'',
                    input12:'',
                    skuId:'',
                    addressList:'',
                    list:'',
                    mercGoodsPrice:0,
                    all_price:0,
                    goods_num:0,
                    all_dispatchPrice:0,
                    active_index:0,
                    addressId:'',
                    merOrders:[],
                    this_index:0,
                    totalNum:0,
                    payform:'',
                    remark:'',
                    resultData:'',
                    quantity:1,
                    couponsUserList:'',
                    couponsId:'',
                };
            },
            components: {

            },
            mounted() {
                this.skuId = this.GetQueryString().id
                // this.quantity = this.GetQueryString().num
                this.scsp()
            },
            methods: {
                // 提交订单
                submit_order(){
                    axios({
                        method:"POST",
                        url:base_url + "/aoms/soibms",
                        data:Qs.stringify({
                            activitySkuId:this.skuId,
                            // quantity:this.quantity,
                            // couponsId:this.couponsId,
                            addressId:this.addressId,
                            remark:this.remark
                        }),
                        headers:{
                            'loginType':0,
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res)
                        if (res.data.code==1) {
                            let payInfo=res.data.data.result.split('<script>')[0]
                            document.getElementById('form_sumbit').innerHTML=payInfo
                            setTimeout(() => {
                                document.forms[0].submit();
                            }, 1000);
                        }
                        
                    })
                    .catch(function (error) {
                    });
                },
                // 选择地址
                choose_add(index,id){
                    this.addressId = id
                    this.active_index = index
                },
                // 获取列表
                scsp() {
                    axios({
                        method:"POST",
                        url:base_url + "/aoms/ibagms",
                        data:Qs.stringify({
                            // quantity:this.quantity,
                            activitySkuId:this.skuId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.addressList = res.data.data.addressList
                        app.resultData = res.data.data.resultData
                        console.log(app.resultData)
                        app.addressId = res.data.data.addressList[0].id
                        app.couponsUserList = res.data.data.couponsUserList
                        app.mercGoodsPrice = res.data.data.resultData.goodsPrice*app.quantity
                        
                        for (let i = 0; i < res.data.data.couponsUserList.length; i++) {
                            if (parseInt(res.data.data.couponsUserList[i].coupons.spendMoney) < parseInt(app.resultData.totalsPrice)) {
                                if (parseInt(app.totalNum)<parseInt(res.data.data.couponsUserList[i].coupons.couponMoney)) {
                                    app.totalNum = res.data.data.couponsUserList[i].coupons.couponMoney
                                    app.resultData.totalsPrice = (app.resultData.totalsPrice - res.data.data.couponsUserList[i].coupons.couponMoney).toFixed(2)
                                    app.couponsId = res.data.data.couponsUserList[i].coupons.id
                                }
                            }
                        }
                    })
                    .catch(function (error) {
                    });
                },
                new_add(){
                    this.add_popup = true
                },
                close_x(){
                    this.add_popup =false
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
            }
        })
    </script>
</body>

</html>